<template>
  <div class="good-li" @click="openGoodDetail()">
    <image class="good-pic" :src="props.good.image" alt="商品图片" mode="aspectFit" />
    <div class="good-detail">
      <span class="good-price">¥ {{ props.good?.price }}</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { _router } from '@/utils/oldIndex';

const props = defineProps({
  good: {
    type: Object,
    default: () => {},
  },
});

const openGoodDetail = () => {
  _router.push({
    path: '/pages/GoodsCon/GoodsCon',
    query: {
      id: props.good.id,
    },
  });
};
</script>

<style scoped lang="scss">
.good-li {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  background: #f3f7f8;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 2rpx solid #e4edef;
  .good-pic {
    width: 200rpx;
    height: 200rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
  }
  .good-detail {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 100rpx;
    height: 36rpx;
    background: rgba(34, 34, 34, 0.4);
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    line-height: 36rpx;
    text-align: center;
    .good-price {
      font-weight: 400;
      font-size: 20rpx;
      color: #ffffff;
    }
  }
}
</style>
